<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>私房菜</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
		<style>
        * {
            box-sizing: border-box;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;  /* 1. 需要将页面的高度设置成浏览器可视区域的高度 */
        }
        #container {
            min-height: 100%; /* 2. 需要将容器的高度设置成100% */
            position: relative; /* 3. 容器的position设置为relative，给子元素定位提供基点 */
        }
        footer {
            color: #FFF;
            padding: 20px;
        }
        
        footer {
            position: absolute;
            bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */
            width: 100%;
            background-color: #457B9D;
        }
		</style>
    </head>
	
    <body background="./1234.jpg" 
	style="background-repeat:no-repeat;
	background-attachment:fixed; 
	background-size:100% 100%; ">
		<div id="myapp">  <!-- 标签通过选择器绑定vue对象，标签里面可以使用vue对象的数据，进而渲染页面 -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">严瑞杰私房菜</a>
        </nav>
		
		
        <!--components-->
        <section class="my-5 pt-5">
		
            <div class="container">
               

                <!-- Tables  -->
                <div class="row mb-5" id="tables">
                    <div class="col-sm-12">
                        <h1>菜品</h1>
						<span> 
							<button type="submit" class="btn btn-primary" v-on:click="show_add()">管理</button> 
						</span>	
						<span v-show="add_show_flag==false">
							<input type="text" v-model="input_value"> 
						</span>
                        <div class="mt-3 mb-5">
                           
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>菜名</th>
                                        <th>描述</th>
                                        <th>单价</th>
										<th>操作</th>              
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>
											<div v-show="add_show_flag==false">
												桌号: {{input_value}}
											</div>
										</th>
                                        <th></th>
                                        <th>
											<div v-show="add_show_flag==false">
												总价: ￥{{total_price()}}
											</div>
										</th>
										<th>
											<div v-show="add_show_flag==false">
												<button type="submit" class="btn btn-primary" v-on:click="add_order_commit()">下单</button>
											</div>
										</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr v-for="dish in dishes">
                                        <td>{{dish.name}}</td>
										<td>{{dish.info}}</td>
                                        <td>￥{{dish.price / 100}}</td> 									
										<td>
											<div v-show="add_show_flag==false">
												<label class="custom-control custom-checkbox">
													<input type="checkbox" class="custom-control-input" v-model="dish.selected_flag">
													<span class="custom-control-indicator"></span>
												</label>
											</div>
											<div v-show="add_show_flag==true">
												<!-- <button type="submit" class="btn btn-primary" v-on:click="add_dish_commit()">修改</button> -->
												<button type="submit" class="btn btn-primary" v-on:click="del_dish_commit(dish.id)">删除</button>
											</div>
										</td>
                                    </tr>
                                    <tr v-show="add_show_flag">
										<td>
											<input type="text" id="accountId" class="form-control" v-model="add_dish.name">
										</td>
                                        <td>
											<input type="text" id="accountId" class="form-control" v-model="add_dish.info">
										</td>
                                        <td>
											<input type="text" id="accountId" class="form-control" v-model="add_dish.price">
										</td> 
										<td>     
											<button type="submit" class="btn btn-primary" v-on:click="add_dish_commit()">提交</button>
										</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
		</div>
        
		<div id="container">       
			<footer>
				<p class="pt-2 text-muted">欢迎光临 &copy;私房菜</p>
			</footer>
		</div>
		
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 链接库 -->
		
		<script> 
			var app = new Vue({ //定义vue对象
				el: '#myapp',  //选择器名称
				data: {
					input_value:"请输入餐桌号:",    //将其与62行的文本框绑定起来，让用户自行输入餐桌号
					order_commit:"",                //得到一个字符串对象，借助它 将数组[1,2]转换为'[1,2]'
					add_show_flag:false,
					add_dish: {
						name:null,
						price:null,
						info:null
					},
					dishes: []
				}, 
				methods: {
					get_alldishes: function(){
						//定义一个ajax对象
						//ajax就是一个http客户端，会自动向服务器发送请求
						//得到响应后，通过回调函数进行指定的操作
						$.ajax({
							url:"/dish",  //http的url请求的资源路径，可以看成执行 ip:port/dish
							type: "get",  //请求方法
							context: this, //给ajax对象规定this值，为vue对象,即this就是app
							success:function(result){  //result是响应的结果
								this.dishes = result;
							}
						});
					},
					show_add: function(){
						if(this.add_show_flag == true){
							this.add_show_flag = false;
						}else {
						this.add_show_flag = true;
						}
					},
					add_dish_commit:function(){
						if(this.add_dish.name.length == 0) {
							alert("请输入菜品名称");
							return;
						}
						if(this.add_dish.info.length == 0) {
							alert("请输入菜品描述");
							return;
						}
						if(this.add_dish.price <= 0) {
							alert("请输入菜品价格");
							return;
						}
						this.add_dish.price *= 100;
						
						$.ajax({
							url:"/dish",  //http的url请求的资源路径，可以看成执行 ip:port/dish
							type: "post",  
							context: this, //给ajax对象规定this值，为vue对象,即this就是app
							data: JSON.stringify(this.add_dish), //json的序列化，将新增的菜品信息进行序列化为字符串。data是要提交给服务器的数据
							success:function(result){   //响应成功之后的回调
								this.get_alldishes();
								alert("新增菜品成功");
								this.add_dish.name=null;
								this.add_dish.price=null;
								this.add_dish.info=null;
							}
						});
					},
					del_dish_commit:function(id){
						$.ajax({
							url:"/dish/" + id,  //拼接一个资源路径
							type: "delete",  
							context: this, 
							success:function(result){   //响应成功之后的回调
								this.get_alldishes();
								alert("删除菜品成功");								
							}
						});
					},
					total_price:function() {
						var total = 0;
						for(var i = 0; i < this.dishes.length; i++) {
							if(this.dishes[i].selected_flag == true) {
								total += this.dishes[i].price;
							}
						}
						return total/100;
					},
					add_order_commit: function(){
						if(this.input_value.length == 0) {  //如果桌号长度为0，需要警告
							alert("请输入桌号！");
							return;
						}
						var commit_order = {dishes:[], table_id:this.input_value, test:0}; //test测试是否进入循环，0表示未进入循环(也就是没有点菜)
						for(var i = 0; i < this.dishes.length; i++) {
							if(this.dishes[i].selected_flag == true) {
								commit_order.test=1; //进入循环后，将test置为1
								commit_order.dishes.push(this.dishes[i].id); //循环完之后，commit_order.dishes里面的数据类似于[1,2]
							}
						}
						if(commit_order.test==0) {  //如果未选中菜品，需要警告
							alert("请点菜！");
							return;
						}
						var commitorder = {dishes:this.order_commit, table_id:this.input_value};  //table_id就是桌号
							commitorder.dishes = JSON.stringify(commit_order.dishes); //将commit_order.dishes里面的数据转换为字符串形式类似于'[1,2]'
						
						$.ajax({
							url:"/order",  //http的url请求的资源路径，
							type: "post",  
							context: this, //给ajax对象规定this值，为vue对象,即this就是app
							data: JSON.stringify(commitorder), //json的序列化，将新增的菜品信息进行序列化为字符串。data是要提交给服务器的数据
							success:function(result){
								for(var i = 0; i < this.dishes.length; i++) {
									if(this.dishes[i].selected_flag == true) {
										this.dishes[i].selected_flag == false;
									}
								}
								alert("下单成功");
							}
						});
					}			
				}	
			}); 
			app.get_alldishes(); //页面获取成功后，就会自动调用这个函数完成数据的获取
		</script>
    </body>	
</html>
